<template>
<div id="mars3dContainer">
<button class="btn1" @click="createmap()">创建地图</button>
<button class="btn2" @click="destroymap()">销毁地图</button>
</div>
</template>
<script setup>
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "mars3d-cesium";
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
import "mars3d-space";
import { onMounted, ref, provide, watch, defineEmits } from "vue";
import { app } from "@/main.js";
import * as mapWork from '../utils/draw.js'
import { createMap, getMap, destroyMap } from './mapManager.js';

const mapOptions = {
  scene: {
    // 37.424659    79.252856
    //31.548343     104.37209
    //37.1965241550  79.51398829
    // 37.000050004000075    79.70194298600005
    // 79.61910991          37.19516018
    center: { lat: 37.000050004000075, lng: 79.70194298600005, alt: 8226.5, heading: 342.8, pitch: -43.1 },
    shadows: false,
    removeDblClick: true,
    sceneMode: 3,
    showSun: true,
    showMoon: true,
    showSkyBox: true,
    showSkyAtmosphere: true,
    fog: true,
    fxaa: true,
    globe: {
      depthTestAgainstTerrain: false,
      baseColor: '#546a53',
      showGroundAtmosphere: true,
      enableLighting: false
    },
    cameraController: {
      zoomFactor: 3.0,
      minimumZoomDistance: 1,
      maximumZoomDistance: 50000000,
      enableRotate: true,
      enableTranslate: true,
      enableTilt: true,
      enableZoom: true,
      enableCollisionDetection: true
    }
  },
  control: {
    baseLayerPicker: true,
    homeButton: true,
    sceneModePicker: true,
    navigationHelpButton: true,
    infoBox: true,
    selectionIndicator: true,
    vrButton: true,
    fullscreenButton: true,
    animation: false,
    timeline: false,
    geocoder: true,
    geocoderConfig: { key: ['ae29a37307840c7ae4a785ac905927e0'] },
    contextmenu: { hasDefault: true },
    mouseDownView: true,
    zoom: { insertIndex: 1 },
    compass: { bottom: "toolbar", left: "5px" },
    distanceLegend: { left: "100px", bottom: "2px" },
  },
  terrain: {
    url: 'http://data.mars3d.cn/terrain',
    show: true
  },
  basemaps: [
    { "id": 10, "name": "地图底图", "type": "group" },
    {
      "pid": 10,
      "name": "天地图卫星",
      "icon": "img/basemaps/tdt_img.jpg",
      "type": "tdt",
      "layer": "img_d",
      "key": ["520a938cc04b304ca5b68f9e6ee8cd73"],
      "show": true
    },
    {
      "pid": 10,
      name: "离线地图",
      icon: "img/basemaps/mapboxSatellite.png",
      type: "xyz",
      url: "//data.mars3d.cn/tile/img/{z}/{x}/{y}.jpg",
      minimumLevel: 0,
      maximumLevel: 13
    },
    {
      "pid": 10,
      name: "单张图片",
      icon: "img/basemaps/offline.png",
      type: "image",
      url: "//data.mars3d.cn/file/img/world/world.jpg"
    },
    {
      "pid": 10,
      "name": "本地单张图片",
      "icon": "img/basemaps/offline.jpg",
      "type": "image",
      "url": "img/tietu/world.jpg"
    }
  ],
  layers: [
    { "id": 99, "name": "数据图层", "type": "group" }
  ]
}

onMounted(() => {
  createMap("mars3dContainer", mapOptions);
  app.provide('$map', getMap());
});

const destroymap = () => {
  destroyMap();

}

const createmap = () => {
  createMap("mars3dContainer", mapOptions);
}
</script>
<style scoped lang='scss'>
#mars3dContainer {
  position: relative;
  top: 0;
  left: 0;    
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;  
  height: 100vh;
}
#mars3dContainer .btn1 {
  position: absolute; /* This makes the buttons float */
  top: 100px; /* Adjust as needed */
  left: 10px; /* Adjust as needed */
  z-index: 999; /* Make sure they're on top */
}
#mars3dContainer .btn2 {
  position: absolute; /* This makes the buttons float */
  top: 100px; /* Adjust as needed */
  left: 100px; /* Adjust as needed */
  z-index: 999; /* Make sure they're on top */
}
</style>
